<!-- character_attribute_panel/frontend/index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>人物属性面板</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
  <link href="css/style.css" rel="stylesheet">
  <style>
    :root {
      --primary-color: #3b82f6;
      --secondary-color: #10b981;
      --tertiary-color: #8b5cf6;
      --background-dark: #1f2937;
      --background-light: #f3f4f6;
      --text-light: #f9fafb;
      --text-dark: #1f2937;
      --attribute-increase: #10b981;
      --attribute-decrease: #ef4444;
    }

    body {
      background: linear-gradient(135deg, #1a2a3a 0%, #0f172a 100%);
      color: var(--text-light);
      min-height: 100vh;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    .panel {
      background: rgba(30, 41, 59, 0.8);
      backdrop-filter: blur(8px);
      border-radius: 16px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
      transition: all 0.3s ease;
    }

    .panel:hover {
      box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4);
      transform: translateY(-2px);
    }

    .attribute-category {
      background: rgba(15, 23, 42, 0.6);
      border-radius: 12px;
      margin-bottom: 16px;
    }

    .attribute-item {
      position: relative;
      border-radius: 8px;
      overflow: hidden;
      transition: all 0.2s ease-in-out;
    }

    .attribute-item:hover {
      background: rgba(255, 255, 255, 0.05);
      transform: translateX(5px);
    }

    .attribute-bar {
      height: 8px;
      border-radius: 4px;
      background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
      transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .attribute-value {
      font-weight: 600;
      transition: all 0.3s;
    }

    .attribute-value.increase {
      color: var(--attribute-increase);
      animation: pulse 0.6s ease-in-out;
    }

    .attribute-value.decrease {
      color: var(--attribute-decrease);
      animation: shake 0.6s ease-in-out;
    }

    @keyframes pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.1); }
    }

    @keyframes shake {
      0%, 100% { transform: translateX(0); }
      25% { transform: translateX(-2px); }
      75% { transform: translateX(2px); }
    }

    .chart-container {
      height: 200px;
      position: relative;
      margin: 20px 0;
    }

    #particles-js {
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: -1;
    }

    .btn {
      background: linear-gradient(135deg, var(--primary-color), var(--tertiary-color));
      border: none;
      color: white;
      padding: 10px 20px;
      border-radius: 8px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s;
      box-shadow: 0 2px 10px rgba(59, 130, 246, 0.3);
    }

    .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 14px rgba(59, 130, 246, 0.5);
    }

    .btn:active {
      transform: translateY(0);
    }
  </style>
</head>
<body class="relative overflow-x-hidden">
  <div id="particles-js"></div>
  <header class="py-6 px-4 md:px-8">
    <div class="container mx-auto flex justify-between items-center">
      <h1 class="text-2xl md:text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-indigo-500">
        人物属性面板
      </h1>
      <div class="flex items-center space-x-3">
        <button id="importBtn" class="btn flex items-center"><i class="fas fa-file-import mr-2"></i> 导入</button>
        <button id="exportBtn" class="btn flex items-center"><i class="fas fa-file-export mr-2"></i> 导出</button>
        <button id="addAttributeBtn" class="btn flex items-center"><i class="fas fa-plus mr-2"></i> 添加属性</button>
      </div>
    </div>
  </header>

  <main class="container mx-auto px-4 md:px-8 pb-16">
    <div class="grid grid-cols-1 md:grid-cols-12 gap-6">
      <!-- 左侧属性面板 -->
      <div class="md:col-span-8">
        <div class="panel p-6">
          <h2 class="text-xl font-bold mb-6 flex items-center">
            <i class="fas fa-user-circle text-blue-400 mr-2"></i>才气系统
          </h2>

          <div id="mainAttributeSection" class="mb-8">
            <div class="flex items-center mb-4">
              <span class="text-lg font-semibold mr-3">才气值:</span>
              <span id="mainAttributeValue" class="text-2xl font-bold text-blue-400">85</span>
              <div class="flex-grow mx-4">
                <div class="bg-gray-700 h-3 rounded-full overflow-hidden">
                  <div id="mainAttributeBar" class="attribute-bar" style="width: 85%;"></div>
                </div>
              </div>
              <div class="flex space-x-2">
                <button class="p-1 bg-blue-600 hover:bg-blue-500 rounded" onclick="adjustAttribute('mainAttribute', 1)">
                  <i class="fas fa-plus text-xs"></i>
                </button>
                <button class="p-1 bg-red-600 hover:bg-red-500 rounded" onclick="adjustAttribute('mainAttribute', -1)">
                  <i class="fas fa-minus text-xs"></i>
                </button>
              </div>
            </div>
          </div>

          <!-- 智慧属性组 -->
          <div class="attribute-category p-4">
            <h3 class="text-lg font-semibold mb-4 border-b border-gray-700 pb-2 text-blue-300">才智系统</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div class="attribute-item p-3" data-attribute="intelligence">
                <div class="flex justify-between items-center mb-2">
                  <span class="font-medium">才智</span>
                  <span class="attribute-value">80</span>
                </div>
                <div class="bg-gray-700 h-2 rounded-full overflow-hidden">
                  <div class="attribute-bar" style="width: 80%;"></div>
                </div>
                <div class="mt-2 flex justify-end">
                  <button class="p-1 bg-blue-600 hover:bg-blue-500 rounded mr-1" onclick="adjustAttribute('intelligence', 1)">
                    <i class="fas fa-plus text-xs"></i>
                  </button>
                  <button class="p-1 bg-red-600 hover:bg-red-500 rounded" onclick="adjustAttribute('intelligence', -1)">
                    <i class="fas fa-minus text-xs"></i>
                  </button>
                </div>
              </div>
              <div class="attribute-item p-3" data-attribute="talent">
                <div class="flex justify-between items-center mb-2">
                  <span class="font-medium">才华</span>
                  <span class="attribute-value">75</span>
                </div>
                <div class="bg-gray-700 h-2 rounded-full overflow-hidden">
                  <div class="attribute-bar" style="width: 75%;"></div>
                </div>
                <div class="mt-2 flex justify-end">
                  <button class="p-1 bg-blue-600 hover:bg-blue-500 rounded mr-1" onclick="adjustAttribute('talent', 1)">
                    <i class="fas fa-plus text-xs"></i>
                  </button>
                  <button class="p-1 bg-red-600 hover:bg-red-500 rounded" onclick="adjustAttribute('talent', -1)">
                    <i class="fas fa-minus text-xs"></i>
                  </button>
                </div>
              </div>
              <div class="attribute-item p-3" data-attribute="ability">
                <div class="flex justify-between items-center mb-2">
                  <span class="font-medium">才能</span>
                  <span class="attribute-value">70</span>
                </div>
                <div class="bg-gray-700 h-2 rounded-full overflow-hidden">
                  <div class="attribute-bar" style="width: 70%;"></div>
                </div>
                <div class="mt-2 flex justify-end">
                  <button class="p-1 bg-blue-600 hover:bg-blue-500 rounded mr-1" onclick="adjustAttribute('ability', 1)">
                    <i class="fas fa-plus text-xs"></i>
                  </button>
                  <button class="p-1 bg-red-600 hover:bg-red-500 rounded" onclick="adjustAttribute('ability', -1)">
                    <i class="fas fa-minus text-xs"></i>
                  </button>
                </div>
              </div>
              <div class="attribute-item p-3" data-attribute="capability">
                <div class="flex justify-between items-center mb-2">
                  <span class="font-medium">才干</span>
                  <span class="attribute-value">82</span>
                </div>
                <div class="bg-gray-700 h-2 rounded-full overflow-hidden">
                  <div class="attribute-bar" style="width: 82%;"></div>
                </div>
                <div class="mt-2 flex justify-end">
                  <button class="p-1 bg-blue-600 hover:bg-blue-500 rounded mr-1" onclick="adjustAttribute('capability', 1)">
                    <i class="fas fa-plus text-xs"></i>
                  </button>
                  <button class="p-1 bg-red-600 hover:bg-red-500 rounded" onclick="adjustAttribute('capability', -1)">
                    <i class="fas fa-minus text-xs"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>

          <!-- 权威属性组 -->
          <div class="attribute-category p-4 mt-6">
            <h3 class="text-lg font-semibold mb-4 border-b border-gray-700 pb-2 text-purple-300">权威系统</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div class="attribute-item p-3" data-attribute="authority">
                <div class="flex justify-between items-center mb-2">
                  <span class="font-medium">权威</span>
                  <span class="attribute-value">65</span>
                </div>
                <div class="bg-gray-700 h-2 rounded-full overflow-hidden">
                  <div class="attribute-bar" style="width: 65%; background: linear-gradient(90deg, #8b5cf6, #ec4899);"></div>
                </div>
                <div class="mt-2 flex justify-end">
                  <button class="p-1 bg-blue-600 hover:bg-blue-500 rounded mr-1" onclick="adjustAttribute('authority', 1)">
                    <i class="fas fa-plus text-xs"></i>
                  </button>
                  <button class="p-1 bg-red-600 hover:bg-red-500 rounded" onclick="adjustAttribute('authority', -1)">
                    <i class="fas fa-minus text-xs"></i>
                  </button>
                </div>
              </div>
              <div class="attribute-item p-3" data-attribute="legal">
                <div class="flex justify-between items-center mb-2">
                  <span class="font-medium">法理</span>
                  <span class="attribute-value">60</span>
                </div>
                <div class="bg-gray-700 h-2 rounded-full overflow-hidden">
                  <div class="attribute-bar" style="width: 60%; background: linear-gradient(90deg, #8b5cf6, #ec4899);"></div>
                </div>
                <div class="mt-2 flex justify-end">
                  <button class="p-1 bg-blue-600 hover:bg-blue-500 rounded mr-1" onclick="adjustAttribute('legal', 1)">
                    <i class="fas fa-plus text-xs"></i>
                  </button>
                  <button class="p-1 bg-red-600 hover:bg-red-500 rounded" onclick="adjustAttribute('legal', -1)">
                    <i class="fas fa-minus text-xs"></i>
                  </button>
                </div>
              </div>
              <div class="attribute-item p-3" data-attribute="identity">
                <div class="flex justify-between items-center mb-2">
                  <span class="font-medium">身份</span>
                  <span class="attribute-value">75</span>
                </div>
                <div class="bg-gray-700 h-2 rounded-full overflow-hidden">
                  <div class="attribute-bar" style="width: 75%; background: linear-gradient(90deg, #8b5cf6, #ec4899);"></div>
                </div>
                <div class="mt-2 flex justify-end">
                  <button class="p-1 bg-blue-600 hover:bg-blue-500 rounded mr-1" onclick="adjustAttribute('identity', 1)">
                    <i class="fas fa-plus text-xs"></i>
                  </button>
                  <button class="p-1 bg-red-600 hover:bg-red-500 rounded" onclick="adjustAttribute('identity', -1)">
                    <i class="fas fa-minus text-xs"></i>
                  </button>
                </div>
              </div>
              <div class="attribute-item p-3" data-attribute="charm">
                <div class="flex justify-between items-center mb-2">
                  <span class="font-medium">魅力</span>
                  <span class="attribute-value">88</span>
                </div>
                <div class="bg-gray-700 h-2 rounded-full overflow-hidden">
                  <div class="attribute-bar" style="width: 88%; background: linear-gradient(90deg, #8b5cf6, #ec4899);"></div>
                </div>
                <div class="mt-2 flex justify-end">
                  <button class="p-1 bg-blue-600 hover:bg-blue-500 rounded mr-1" onclick="adjustAttribute('charm', 1)">
                    <i class="fas fa-plus text-xs"></i>
                  </button>
                  <button class="p-1 bg-red-600 hover:bg-red-500 rounded" onclick="adjustAttribute('charm', -1)">
                    <i class="fas fa-minus text-xs"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>

          <!-- 声誉属性组 -->
          <div class="attribute-category p-4 mt-6">
            <h3 class="text-lg font-semibold mb-4 border-b border-gray-700 pb-2 text-green-300">声誉系统</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div class="attribute-item p-3" data-attribute="reputation">
                <div class="flex justify-between items-center mb-2">
                  <span class="font-medium">口碑</span>
                  <span class="attribute-value">78</span>
                </div>
                <div class="bg-gray-700 h-2 rounded-full overflow-hidden">
                  <div class="attribute-bar" style="width: 78%; background: linear-gradient(90deg, #10b981, #3b82f6);"></div>
                </div>
                <div class="mt-2 flex justify-end">
                  <button class="p-1 bg-blue-600 hover:bg-blue-500 rounded mr-1" onclick="adjustAttribute('reputation', 1)">
                    <i class="fas fa-plus text-xs"></i>
                  </button>
                  <button class="p-1 bg-red-600 hover:bg-red-500 rounded" onclick="adjustAttribute('reputation', -1)">
                    <i class="fas fa-minus text-xs"></i>
                  </button>
                </div>
              </div>
              <div class="attribute-item p-3" data-attribute="virtue">
                <div class="flex justify-between items-center mb-2">
                  <span class="font-medium">德行</span>
                  <span class="attribute-value">85</span>
                </div>
                <div class="bg-gray-700 h-2 rounded-full overflow-hidden">
                  <div class="attribute-bar" style="width: 85%; background: linear-gradient(90deg, #10b981, #3b82f6);"></div>
                </div>
                <div class="mt-2 flex justify-end">
                  <button class="p-1 bg-blue-600 hover:bg-blue-500 rounded mr-1" onclick="adjustAttribute('virtue', 1)">
                    <i class="fas fa-plus text-xs"></i>
                  </button>
                  <button class="p-1 bg-red-600 hover:bg-red-500 rounded" onclick="adjustAttribute('virtue', -1)">
                    <i class="fas fa-minus text-xs"></i>
                  </button>
                </div>
              </div>
              <div class="attribute-item p-3" data-attribute="ability2">
                <div class="flex justify-between items-center mb-2">
                  <span class="font-medium">才能</span>
                  <span class="attribute-value">72</span>
                </div>
                <div class="bg-gray-700 h-2 rounded-full overflow-hidden">
                  <div class="attribute-bar" style="width: 72%; background: linear-gradient(90deg, #10b981, #3b82f6);"></div>
                </div>
                <div class="mt-2 flex justify-end">
                  <button class="p-1 bg-blue-600 hover:bg-blue-500 rounded mr-1" onclick="adjustAttribute('ability2', 1)">
                    <i class="fas fa-plus text-xs"></i>
                  </button>
                  <button class="p-1 bg-red-600 hover:bg-red-500 rounded" onclick="adjustAttribute('ability2', -1)">
                    <i class="fas fa-minus text-xs"></i>
                  </button>
                </div>
              </div>
              <div class="attribute-item p-3" data-attribute="fame">
                <div class="flex justify-between items-center mb-2">
                  <span class="font-medium">风评</span>
                  <span class="attribute-value">68</span>
                </div>
                <div class="bg-gray-700 h-2 rounded-full overflow-hidden">
                  <div class="attribute-bar" style="width: 68%; background: linear-gradient(90deg, #10b981, #3b82f6);"></div>
                </div>
                <div class="mt-2 flex justify-end">
                  <button class="p-1 bg-blue-600 hover:bg-blue-500 rounded mr-1" onclick="adjustAttribute('fame', 1)">
                    <i class="fas fa-plus text-xs"></i>
                  </button>
                  <button class="p-1 bg-red-600 hover:bg-red-500 rounded" onclick="adjustAttribute('fame', -1)">
                    <i class="fas fa-minus text-xs"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧面板 -->
      <div class="md:col-span-4">
        <!-- 沟通系统面板 -->
        <div class="panel p-6 mb-6">
          <h2 class="text-xl font-bold mb-4 flex items-center">
            <i class="fas fa-comments text-blue-400 mr-2"></i>沟通系统
          </h2>
          <div class="grid grid-cols-1 gap-3">
            <div class="attribute-item p-3" data-attribute="affinity">
              <div class="flex justify-between items-center mb-2">
                <span class="font-medium">亲和力</span>
                <span class="attribute-value">76</span>
              </div>
              <div class="bg-gray-700 h-2 rounded-full overflow-hidden">
                <div class="attribute-bar" style="width: 76%; background: linear-gradient(90deg, #f59e0b, #ef4444);"></div>
              </div>
            </div>
            <div class="attribute-item p-3" data-attribute="communication">
              <div class="flex justify-between items-center mb-2">
                <span class="font-medium">沟通力</span>
                <span class="attribute-value">83</span>
              </div>
              <div class="bg-gray-700 h-2 rounded-full overflow-hidden">
                <div class="attribute-bar" style="width: 83%; background: linear-gradient(90deg, #f59e0b, #ef4444);"></div>
              </div>
            </div>
            <div class="attribute-item p-3" data-attribute="execution">
              <div class="flex justify-between items-center mb-2">
                <span class="font-medium">执行力</span>
                <span class="attribute-value">79</span>
              </div>
              <div class="bg-gray-700 h-2 rounded-full overflow-hidden">
                <div class="attribute-bar" style="width: 79%; background: linear-gradient(90deg, #f59e0b, #ef4444);"></div>
              </div>
            </div>
            <div class="attribute-item p-3" data-attribute="organization">
              <div class="flex justify-between items-center mb-2">
                <span class="font-medium">组织力</span>
                <span class="attribute-value">71</span>
              </div>
              <div class="bg-gray-700 h-2 rounded-full overflow-hidden">
                <div class="attribute-bar" style="width: 71%; background: linear-gradient(90deg, #f59e0b, #ef4444);"></div>
              </div>
            </div>
          </div>
        </div>

        <!-- 领导系统面板 -->
        <div class="panel p-6 mb-6">
          <h2 class="text-xl font-bold mb-4 flex items-center">
            <i class="fas fa-crown text-yellow-400 mr-2"></i>领导系统
          </h2>
          <div class="grid grid-cols-1 gap-3">
            <div class="attribute-item p-3" data-attribute="inspiration">
              <div class="flex justify-between items-center mb-2">
                <span class="font-medium">感召力</span>
                <span class="attribute-value">81</span>
              </div>
              <div class="bg-gray-700 h-2 rounded-full overflow-hidden">
                <div class="attribute-bar" style="width: 81%; background: linear-gradient(90deg, #f59e0b, #8b5cf6);"></div>
              </div>
            </div>
            <div class="attribute-item p-3" data-attribute="guidance">
              <div class="flex justify-between items-center mb-2">
                <span class="font-medium">引领力</span>
                <span class="attribute-value">74</span>
              </div>
              <div class="bg-gray-700 h-2 rounded-full overflow-hidden">
                <div class="attribute-bar" style="width: 74%; background: linear-gradient(90deg, #f59e0b, #8b5cf6);"></div>
              </div>
            </div>
            <div class="attribute-item p-3" data-attribute="leadership">
              <div class="flex justify-between items-center mb-2">
                <span class="font-medium">领导力</span>
                <span class="attribute-value">79</span>
              </div>
              <div class="bg-gray-700 h-2 rounded-full overflow-hidden">
                <div class="attribute-bar" style="width: 79%; background: linear-gradient(90deg, #f59e0b, #8b5cf6);"></div>
              </div>
            </div>
            <div class="attribute-item p-3" data-attribute="organization2">
              <div class="flex justify-between items-center mb-2">
                <span class="font-medium">组织力</span>
                <span class="attribute-value">77</span>
              </div>
              <div class="bg-gray-700 h-2 rounded-full overflow-hidden">
                <div class="attribute-bar" style="width: 77%; background: linear-gradient(90deg, #f59e0b, #8b5cf6);"></div>
              </div>
            </div>
          </div>
        </div>

        <!-- 决策系统面板 -->
        <div class="panel p-6 mb-6">
          <h2 class="text-xl font-bold mb-4 flex items-center">
            <i class="fas fa-balance-scale text-green-400 mr-2"></i>决策系统
          </h2>
          <div class="grid grid-cols-1 gap-3">
            <div class="attribute-item p-3" data-attribute="decision">
              <div class="flex justify-between items-center mb-2">
                <span class="font-medium">决策力</span>
                <span class="attribute-value">85</span>
              </div>
              <div class="bg-gray-700 h-2 rounded-full overflow-hidden">
                <div class="attribute-bar" style="width: 85%; background: linear-gradient(90deg, #10b981, #3b82f6);"></div>
              </div>
            </div>
            <div class="attribute-item p-3" data-attribute="judgment">
              <div class="flex justify-between items-center mb-2">
                <span class="font-medium">判断力</span>
                <span class="attribute-value">82</span>
              </div>
              <div class="bg-gray-700 h-2 rounded-full overflow-hidden">
                <div class="attribute-bar" style="width: 82%; background: linear-gradient(90deg, #10b981, #3b82f6);"></div>
              </div>
            </div>
            <div class="attribute-item p-3" data-attribute="leadership2">
              <div class="flex justify-between items-center mb-2">
                <span class="font-medium">领导力</span>
                <span class="attribute-value">78</span>
              </div>
              <div class="bg-gray-700 h-2 rounded-full overflow-hidden">
                <div class="attribute-bar" style="width: 78%; background: linear-gradient(90deg, #10b981, #3b82f6);"></div>
              </div>
            </div>
            <div class="attribute-item p-3" data-attribute="organization3">
              <div class="flex justify-between items-center mb-2">
                <span class="font-medium">组织力</span>
                <span class="attribute-value">80</span>
              </div>
              <div class="bg-gray-700 h-2 rounded-full overflow-hidden">
                <div class="attribute-bar" style="width: 80%; background: linear-gradient(90deg, #10b981, #3b82f6);"></div>
              </div>
            </div>
          </div>
        </div>

        <!-- 善念善行系统面板 -->
        <div class="panel p-6 mb-6">
          <h2 class="text-xl font-bold mb-4 flex items-center">
            <i class="fas fa-heart text-pink-400 mr-2"></i>善念善行系统
          </h2>
          <div class="grid grid-cols-1 gap-4">
            <div class="p-3 bg-opacity-50 bg-blue-900 rounded-lg">
              <h4 class="font-medium mb-2 text-blue-300">善念</h4>
              <div class="grid grid-cols-3 gap-2">
                <div class="attribute-item p-2" data-attribute="self-respect">
                  <div class="text-center mb-1">
                    <span class="text-sm">自尊</span>
                  </div>
                  <div class="bg-gray-700 h-2 rounded-full overflow-hidden">
                    <div class="attribute-bar" style="width: 75%; background: linear-gradient(90deg, #3b82f6, #8b5cf6);"></div>
                  </div>
                </div>
                <div class="attribute-item p-2" data-attribute="self-peace">
                  <div class="text-center mb-1">
                    <span class="text-sm">自在</span>
                  </div>
                  <div class="bg-gray-700 h-2 rounded-full overflow-hidden">
                    <div class="attribute-bar" style="width: 82%; background: linear-gradient(90deg, #3b82f6, #8b5cf6);"></div>
                  </div>
                </div>
                <div class="attribute-item p-2" data-attribute="self-love">
                  <div class="text-center mb-1">
                    <span class="text-sm">自爱</span>
                  </div>
                  <div class="bg-gray-700 h-2 rounded-full overflow-hidden">
                    <div class="attribute-bar" style="width: 68%; background: linear-gradient(90deg, #3b82f6, #8b5cf6);"></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="p-3 bg-opacity-50 bg-green-900 rounded-lg">
              <h4 class="font-medium mb-2 text-green-300">善行</h4>
              <div class="grid grid-cols-3 gap-2">
                <div class="attribute-item p-2" data-attribute="self-confidence">
                  <div class="text-center mb-1">
                    <span class="text-sm">自信</span>
                  </div>
                  <div class="bg-gray-700 h-2 rounded-full overflow-hidden">
                    <div class="attribute-bar" style="width: 86%; background: linear-gradient(90deg, #10b981, #34d399);"></div>
                  </div>
                </div>
                <div class="attribute-item p-2" data-attribute="self-reliance">
                  <div class="text-center mb-1">
                    <span class="text-sm">自立</span>
                  </div>
                  <div class="bg-gray-700 h-2 rounded-full overflow-hidden">
                    <div class="attribute-bar" style="width: 79%; background: linear-gradient(90deg, #10b981, #34d399);"></div>
                  </div>
                </div>
                <div class="attribute-item p-2" data-attribute="self-strengthening">
                  <div class="text-center mb-1">
                    <span class="text-sm">自强</span>
                  </div>
                  <div class="bg-gray-700 h-2 rounded-full overflow-hidden">
                    <div class="attribute-bar" style="width: 83%; background: linear-gradient(90deg, #10b981, #34d399);"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 组织力曲线量表 -->
    <div class="panel p-6 mt-6">
      <h2 class="text-xl font-bold mb-4 flex items-center">
        <i class="fas fa-chart-line text-purple-400 mr-2"></i>组织力曲线量表
      </h2>
      <div class="chart-container" id="organizationChart">
        <canvas id="orgChartCanvas"></canvas>
      </div>
    </div>
  </main>

  <!-- 导入弹窗 -->
  <div id="importModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
    <div class="bg-gray-800 rounded-lg p-6 max-w-md w-full">
      <h3 class="text-xl font-bold mb-4">导入角色数据</h3>
      <textarea id="importData" class="w-full h-40 bg-gray-700 text-white p-3 rounded mb-4" placeholder="粘贴JSON格式的角色数据"></textarea>
      <div class="flex justify-end space-x-3">
        <button id="cancelImport" class="px-4 py-2 bg-gray-600 rounded">取消</button>
        <button id="confirmImport" class="px-4 py-2 bg-blue-600 rounded">导入</button>
      </div>
    </div>
  </div>

  <!-- 添加属性弹窗 -->
  <div id="addAttributeModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
    <div class="bg-gray-800 rounded-lg p-6 max-w-md w-full">
      <h3 class="text-xl font-bold mb-4">添加自定义属性</h3>
      <div class="mb-4">
        <label class="block text-sm mb-1">属性名称</label>
        <input id="attributeName" type="text" class="w-full bg-gray-700 text-white p-2 rounded" placeholder="输入属性名称">
      </div>
      <div class="mb-4">
        <label class="block text-sm mb-1">属性分类</label>
        <select id="attributeCategory" class="w-full bg-gray-700 text-white p-2 rounded">
          <option value="main">主属性</option>
          <option value="intelligence">才智系统</option>
          <option value="authority">权威系统</option>
          <option value="reputation">声誉系统</option>
          <option value="communication">沟通系统</option>
          <option value="leadership">领导系统</option>
          <option value="decision">决策系统</option>
          <option value="virtue">善念善行系统</option>
        </select>
      </div>
      <div class="mb-4">
        <label class="block text-sm mb-1">初始值 (0-100)</label>
        <input id="attributeValue" type="number" min="0" max="100" class="w-full bg-gray-700 text-white p-2 rounded" value="50">
      </div>
      <div class="flex justify-end space-x-3">
        <button id="cancelAddAttribute" class="px-4 py-2 bg-gray-600 rounded">取消</button>
        <button id="confirmAddAttribute" class="px-4 py-2 bg-blue-600 rounded">添加</button>
      </div>
    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js"></script>
  <script src="js/script.js"></script>
  <script>
    // 粒子效果初始化
    particlesJS('particles-js', {
      "particles": {
        "number": {
          "value": 80,
          "density": {
            "enable": true,
            "value_area": 800
          }
        },
        "color": {
          "value": "#3b82f6"
        },
        "shape": {
          "type": "circle",
          "stroke": {
            "width": 0,
            "color": "#000000"
          }
        },
        "opacity": {
          "value": 0.5,
          "random": false,
          "anim": {
            "enable": false,
            "speed": 1,
            "opacity_min": 0.1,
            "sync": false
          }
        },
        "size": {
          "value": 3,
          "random": true,
          "anim": {
            "enable": false,
            "speed": 40,
            "size_min": 0.1,
            "sync": false
          }
        },
        "line_linked": {
          "enable": true,
          "distance": 150,
          "color": "#3b82f6",
          "opacity": 0.4,
          "width": 1
        },
        "move": {
          "enable": true,
          "speed": 2,
          "direction": "none",
          "random": false,
          "straight": false,
          "out_mode": "out",
          "bounce": false,
          "attract": {
            "enable": false,
            "rotateX": 600,
            "rotateY": 1200
          }
        }
      },
      "interactivity": {
        "detect_on": "canvas",
        "events": {
          "onhover": {
            "enable": true,
            "mode": "grab"
          },
          "onclick": {
            "enable": true,
            "mode": "push"
          },
          "resize": true
        },
        "modes": {
          "grab": {
            "distance": 140,
            "line_linked": {
              "opacity": 1
            }
          },
          "bubble": {
            "distance": 400,
            "size": 40,
            "duration": 2,
            "opacity": 8,
            "speed": 3
          },
          "repulse": {
            "distance": 200,
            "duration": 0.4
          },
          "push": {
            "particles_nb": 4
          },
          "remove": {
            "particles_nb": 2
          }
        }
      },
      "retina_detect": true
    });
    
    // 临时实现属性调整函数
    function adjustAttribute(attributeId, change) {
      const attrItems = document.querySelectorAll('.attribute-item');
      let targetElement;
      
      if (attributeId === 'mainAttribute') {
        targetElement = document.getElementById('mainAttributeValue');
        const bar = document.getElementById('mainAttributeBar');
        let currentValue = parseInt(targetElement.textContent);
        currentValue = Math.max(0, Math.min(100, currentValue + change));
        targetElement.textContent = currentValue;
        bar.style.width = `${currentValue}%`;
        
        if (change > 0) {
          targetElement.classList.add('increase');
        } else if (change < 0) {
          targetElement.classList.add('decrease');
        }
        
        setTimeout(() => {
          targetElement.classList.remove('increase', 'decrease');
        }, 600);
        
        return;
      }
      
      for (const item of attrItems) {
        if (item.dataset.attribute === attributeId) {
          targetElement = item.querySelector('.attribute-value');
          const bar = item.querySelector('.attribute-bar');
          let currentValue = parseInt(targetElement.textContent);
          currentValue = Math.max(0, Math.min(100, currentValue + change));
          targetElement.textContent = currentValue;
          bar.style.width = `${currentValue}%`;
          
          if (change > 0) {
            targetElement.classList.add('increase');
          } else if (change < 0) {
            targetElement.classList.add('decrease');
          }
          
          setTimeout(() => {
            targetElement.classList.remove('increase', 'decrease');
          }, 600);
          
          break;
        }
      }
    }

    // 初始化组织力曲线图表
    document.addEventListener('DOMContentLoaded', function() {
      const ctx = document.getElementById('orgChartCanvas').getContext('2d');
      const orgChart = new Chart(ctx, {
        type: 'line',
        data: {
          labels: ['规划', '协调', '执行', '控制', '创新', '培养', '评估'],
          datasets: [{
            label: '组织力指数',
            data: [85, 72, 79, 68, 90, 75, 82],
            fill: true,
            backgroundColor: 'rgba(59, 130, 246, 0.2)',
            borderColor: 'rgba(59, 130, 246, 1)',
            borderWidth: 2,
            tension: 0.4,
            pointBackgroundColor: 'rgba(59, 130, 246, 1)',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: 'rgba(59, 130, 246, 1)'
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          scales: {
            y: {
              beginAtZero: true,
              max: 100,
              grid: {
                color: 'rgba(255, 255, 255, 0.1)'
              },
              ticks: {
                color: 'rgba(255, 255, 255, 0.7)'
              }
            },
            x: {
              grid: {
                color: 'rgba(255, 255, 255, 0.1)'
              },
              ticks: {
                color: 'rgba(255, 255, 255, 0.7)'
              }
            }
          },
          plugins: {
            legend: {
              labels: {
                color: 'rgba(255, 255, 255, 0.7)'
              }
            }
          }
        }
      });
    });

    // 弹窗控制
    document.getElementById('importBtn').addEventListener('click', () => {
      document.getElementById('importModal').classList.remove('hidden
    
    document.getElementById('cancelImport').addEventListener('click', () => {
      document.getElementById('importModal').classList.add('hidden');
    });
    
    document.getElementById('addAttributeBtn').addEventListener('click', () => {
      document.getElementById('addAttributeModal').classList.remove('hidden');
    });
    
    document.getElementById('cancelAddAttribute').addEventListener('click', () => {
      document.getElementById('addAttributeModal').classList.add('hidden');
    });

    document.getElementById('exportBtn').addEventListener('click', () => {
      alert('数据导出功能正在开发中');
    });

    document.getElementById('confirmImport').addEventListener('click', () => {
      alert('数据导入功能正在开发中');
      document.getElementById('importModal').classList.add('hidden');
    });

    document.getElementById('confirmAddAttribute').addEventListener('click', () => {
      alert('自定义属性功能正在开发中');
      document.getElementById('addAttributeModal').classList.add('hidden');
    });
  </script>
</body>
</html>
